<template>
    <div class="page has-navbar login">
        <von-header>
            <button class="button button-icon ion-ios-arrow-back" slot="left" @click="$router.go(-1)"></button>
            <span slot="title">注册</span>
        </von-header>
        <div class="page-content">
            <div class="login-content">
                    <div class="login-form">
                        <form>
                            <div class="login-form-item">
                                <span class="city">中国</span>
                                <p @click="chooseRegion()">
                                    <span class="code">+86</span>
                                    <span class="sanjiao"></span>
                                </p>
                            </div>
                            <div class="login-form-item">
                                <i class="ion-person-add login-icon"></i>
                                <input type="text" placeholder="输入手机号">
                            </div>
                            <div class="login-form-item">
                                <i class="ion-email login-icon"></i>
                                <input type="email" placeholder="短信验证码">
                            </div>
                            <div class="login-form-item">
                                <i class="ion-key login-icon"></i>
                                <input type="password" placeholder="5-20位密码，包含字母和数字">
                            </div>
                            <button class="form-button">注册</button>
                        </form>
                    </div>
                </div>
                <div class="choose-region">
                    <p>
                        <span>请选择国际区号</span>
                        <span @click="cancelChoose()">取消</span>
                        <span class="clear"></span>
                    </p>
                    <ul class="pre-list">
                        <li class="list-item active" @click="chooseRegionli($event)"><span>中国 </span><span> +86</span></li>
                        <li class="list-item"  @click="chooseRegionli($event)"><span>美国 </span><span> +1</span></li>
                        <li class="list-item" @click="chooseRegionli($event)"><span>台湾 </span><span> +886</span></li>
                        <li class="list-item" @click="chooseRegionli($event)"><span>加拿大 </span><span> +1</span></li>
                        <li class="list-item" @click="chooseRegionli($event)"><span>香港 </span><span> +852</span></li>
                        <li class="list-item" @click="chooseRegionli($event)"><span>澳大利亚 </span><span> +61</span></li>
                        <li class="list-item" @click="chooseRegionli($event)"><span>英国 </span><span> +44</span></li>
                        <li class="list-item" @click="chooseRegionli($event)"><span>新加坡 </span><span> +65</span></li>
                        <li class="list-item" @click="chooseRegionli($event)"><span>日本 </span><span> +81</span></li>
                        <li class="list-item" @click="chooseRegionli($event)"><span>法国 </span><span> +33</span></li>
                    </ul>
                </div>
            </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                a:1
            }
        },
        methods:{
            chooseRegion(){
                $('.choose-region').css('display','block')
            },
            cancelChoose(){
                $('.choose-region').css('display','none')
            },
            chooseRegionli(ev){
                $(ev.target).css('color','#0090f2').siblings().css('color','#363636')
                $('.city').html($(ev.target).find('span').eq(0).html())
                $('.code').html($(ev.target).find('span').eq(1).html())
                $('.choose-region').css('display','none')
            }
        }
    }
</script>
<style>
    .login .button.button-icon.ion-ios-arrow-back{
        font-size:10px;
        color: #0090f2;
    }
    .login .bar.bar-header{
        box-shadow: none;
    }
    .login-content{
        padding:0 24px;
    }

    .login-form-item{
        border-bottom: 0.001rem solid #d6d6d6;
        height: 60px;
        line-height: 60px;
    }
    .login-icon{
        font-size:20px;
        color:#ccc;
        display: inline-block;
        width:10%;
        float: left;
    }
    .login-form-item input{
        float: left;
        display: inline-block;
        width:90%;
        margin:13px 0;
        border:none;
        outline: none;
    }
    button.form-button{
        width:100%;
        height:50px;
        line-height: 50px;
        margin:25px 0;
        border:none;
        outline: none;
        background: #d6d6d6;
        color: #fff;
        font-size:18px;
        border-radius: 5px;
    }
    .login-form-item p{
        display: inline-block;
    }
    .sanjiao{
        display: inline-block;
        border-left:8px solid transparent;
        border-bottom:8px solid #0090f2;
        position: relative;
        top:5px;
        left:-5px;
    }
    .choose-region{
        width:100%;
        position: fixed;
        top:calc(35%);
        font-size:16px;
        background: #fff;
        padding:0 24px;
        display: none;
        height:420px;
        overflow: scroll;
    }
    .choose-region p{
        width:100%;
        height:60px;
        line-height: 60px;
        border-top: 1px solid #ccc;
    }
    .choose-region p span:nth-of-type(1){
        display: inline-block;
        float: left;
        width:50%;
    }
    .choose-region p span:nth-of-type(2){
        display: inline-block;
        float: right;
        width:50%;
        text-align: right;
    }
    .choose-region ul li{
        height:60px;
        line-height: 60px;
        border-top: 1px solid #ccc;
    }
    .choose-region ul li:last-child{
        border-bottom: 1px solid #ccc;
    }
</style>